<template>
  <view 
  @click=" searchBoxHandler"
  :style="{'background-color' :bgcolor}" 
  class="my-search-container">
    <!-- 自定义搜索组件 -->
    <view class="my-search-box" :style="{'border-radius': radius + 'px'}">
      <uni-icons  type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
    
  </view>
</template>

<script>
  export default {
    name:"my-search",
    data() {
      return {
        
      };
    },
    props:{
      bgcolor:{
        type:String,
        default:'#c00000'
      },
      radius:{
        type:Number,
        default:18
      }
      //背景颜色
      // 圆角尺寸
    },
    methods:{
       // 点击了模拟的 input 输入框
       searchBoxHandler(){
   // 触发外界通过 @click 绑定的 click 事件处理函数
   this.$emit('click')
   // console.log('~~~~~');
       }
    }
  }
</script>

<style lang="scss">
.my-search-container {
  // background-color: #c00000;
   height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    .my-search-box{
       height: 36px;
        background-color: #ffffff;
        // border-radius: 15px;
          width: 100%;
           align-items: center;
            justify-content: center;
            display: flex;
            .placeholder{
               font-size: 15px;
                  margin-left: 5px;
            }
    }
}
</style>